     
<template>
  <view>
    <view class="page-body-ee">
      <map
        style="width: 100%; height: 100%"
        :latitude="latitude"
        :longitude="longitude"
        scale="10"
        :markers="markers"
        :polyline="polyline"
      >
      </map>
    </view>
  </view>
</template>

<script>
import amap from './../../common/amap-wx.js'
export default {
  props: {
    //出厂时间
    startTime: {
      type: String,
      default: '',
    },
    //签收时间
    signTime: {
      type: String,
      default: '',
    },
    //到达时间
    endTime: {
      type: String,
      default: '',
    },
    //中心纬度
    latitude: {
      type: String,
      default: '',
    },
    //中心经度
    longitude: {
      type: String,
      default: '',
    },
    //车的坐标
    carPlace: {
      type: Object,
      default: () => {
        return {}
      },
    },
    //起点坐标
    startPlace: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 终点坐标
    endPlace: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 轨迹线数组
    LineArr: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      // 地图实例
      amapPlugin: null,
      // 小程序高德地图key
      key: 'b52332151746557f1990d503d4dc9c2e',
      markers: [
        {
          iconPath: './../../static/tidan/quan.png',
          id: 0,
          latitude: '',
          longitude: '',
          width: 10,
          height: 10,
        },
        {
          iconPath: './../../static/tidan/car.png',
          id: 1,
          latitude: '',
          longitude: '',
          width: 26,
          height: 14,
        },
        {
          iconPath: './../../static/tidan/quan.png',
          id: 2,
          latitude: '',
          longitude: '',
          width: 10,
          height: 10,
        },
      ],
      polyline: [],
    }
  },
  mounted() {
    this.amapPlugin = new amap.AMapWX({ key: this.key })
    this.getTrackData()
  },
  methods: {
    // 获取轨迹数据
    getTrackData() {
      // 创建一个空数组用于存放地图轨迹数据
      let arr = []
      this.LineArr &&
        this.LineArr.forEach((item, index) => {
          arr.push({
            longitude: item.longitude,
            latitude: item.latitude,
          })
        })
      this.polyline = [
        {
          points: arr,
          color: '#FF0000', //经过轨迹颜色
          width: 4, // 轨迹线条的宽度
        },
      ]
      // this.polyline.push({
      //   points: arr1,
      //   color: '#4594ff', //未经过轨迹颜色
      //   width: 4, // 轨迹线条的宽度
      // })
      // 改变车图标坐标
      this.markers[1].latitude = this.carPlace.latitude
      this.markers[1].longitude = this.carPlace.longitude
      // 改变起点图标坐标
      this.markers[0].latitude = this.startPlace.latitude
      this.markers[0].longitude = this.startPlace.longitude
      //起点窗体信息
      // if (this.startTime) {
      //   let tagObj = {
      //     //自定义标记点上方的气泡窗口 点击有效
      //     content: `出厂时间
      //     ${this.startTime}
      //     `, //文本
      //     color: '#ffffff', //文字颜色
      //     fontSize: 14, //文本大小
      //     borderRadius: 2, //边框圆角
      //     bgColor: '#7660FF', //背景颜色
      //     display: 'ALWAYS', //常显
      //     padding: 5, //气泡窗口的内间距
      //   }
      //   this.markers[0].callout = tagObj
      // }
      // 改变终点图标坐标
      this.markers[2].latitude = this.endPlace.latitude
      this.markers[2].longitude = this.endPlace.longitude
      //终点窗体信息
      // if (this.endTime && !this.signTime) {
      //   let tagObj = {
      //     //自定义标记点上方的气泡窗口 点击有效
      //     content: `预计到达时间
      //     ${this.endTime}
      //     `, //文本
      //     color: '#ffffff', //文字颜色
      //     fontSize: 14, //文本大小
      //     borderRadius: 2, //边框圆角
      //     bgColor: '#7660FF', //背景颜色
      //     display: 'ALWAYS', //常显
      //     padding: 5, //气泡窗口的内间距
      //   }
      //   this.markers[2].callout = tagObj
      // } else if (this.signTime) {
      //   let tagObj = {
      //     //自定义标记点上方的气泡窗口 点击有效
      //     content: `签收时间
      //     ${this.signTime}
      //     `, //文本
      //     color: '#ffffff', //文字颜色
      //     fontSize: 14, //文本大小
      //     borderRadius: 2, //边框圆角
      //     bgColor: '#7660FF', //背景颜色
      //     display: 'ALWAYS', //常显
      //     padding: 5, //气泡窗口的内间距
      //   }
      //   this.markers[2].callout = tagObj
      // }
    },
  },
}
</script>

<style>
.page-body-ee {
  height: 470rpx;
  width: 100%;
}
</style>
